<template>
  <div>
    <h1>H****{{count}}</h1>
    <button @click="add">累加</button>
    <button @click="decrement">累减</button>
    <button @click='addPer'>新增人名</button>
    <button @click="destroy">卸载自己</button>

  </div>
</template>

<script>
export default {
    name:'Header',
    data(){
      return {
        count:0
      }
    },
    methods:{
      add(){
        this.count++

        this.$emit('count',this.count)
      },
      decrement(){
        this.count--
        this.$emit('count',this.count)
      },
      addPer(){
        this.$emit('list','xiaoming')
      },
      destroy(){
        this.$destroy()
      }
    },
    beforeDestroy() {
      this.$off(['count'])
    },
}
</script>

<style>

</style>